<template>
    <div>
        <el-row>
            <el-col :span="2">
                <el-button size="small" @click="addUserHandler">添加</el-button>
            </el-col>
            <el-col :span="12">
                <el-form class="demo-form-inline" :inline="true" size="small">
                    <el-form-item label="用户名">
                        <el-input v-model="params.username" placeholder="用户名" clearable></el-input>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
        <el-table :data="users.list" style="width: 100%" size="small">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <!-- <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column> -->
            <el-table-column prop="username" label="用户名" align="center"></el-table-column>
            <el-table-column prop="realname" label="姓名" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" align="center"></el-table-column>
            <el-table-column prop="telephone" label="手机号" align="center"></el-table-column>
            <el-table-column prop="birth" label="出生日期" align="center">
                <template slot-scope="scope">
                    {{scope.row.birth | dateFormat}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-link :underline="false" @click="editHandler(scope.row)">修改</el-link>
                    <el-link :underline="false" @click="deleteHandler(scope.row.id)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            style="float:right;margin-top:1em"
            layout="total, prev, pager, next"
            @current-change="changeHandler"
            :current-page='params.page'
            :page-size='params.pageSize'
            :total="users.total">
        </el-pagination>

        <!-- 模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="50%">
            <!-- {{form}} -->
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="form.realname"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="form.gender">
                        <el-radio label="male" value="male">男</el-radio>
                        <el-radio label="female" value="female">女</el-radio>
                    </el-radio-group>
                </el-form-item>   
                <el-form-item label="出生日期">
                    <el-date-picker
                        v-model="form.birth"
                        type="date"
                        placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>  
                <el-form-item label="手机号">
                    <el-input v-model="form.telephone"></el-input>
                </el-form-item> 
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveHandler">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
import moment from 'moment'
export default {
    data() {
        return {
            formInline:{},
            title:'',
            // 模态框
            form:{
                gender:"male"
            },
            dialogVisible:false,
            params: {
                page: 1,
                pageSize: 5
            }
        }
    },
    computed: {
        ...mapState('base',["users"])
    },
    created() {
        // 分页查询用户信息
        this.queryUser(this.params)
    },
    watch:{
        // 只要params发生变化，就会执行watch中的方法
        params:{
            handler:function(){
                this.queryUser(this.params)
            },
            deep:true
        }
    },
    methods: {
        ...mapActions('base',["queryUser","saveOrUpdateUser","deleteUser"]),
        // 删除
        deleteHandler(id) {
            // console.log(id)
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                this.deleteUser(id).then(res => {
                    this.queryUser(this.params)
                })
            }) 
        },
        // 修改
        editHandler(row) {
            this.title = "修改用户信息"
            this.form = JSON.parse(JSON.stringify(row))
            this.dialogVisible = true
        },
        // 保存
        saveHandler() {
            if(typeof(this.form.birth) != 'number') {
                this.form.birth = this.form.birth.getTime()
            }
            
            this.saveOrUpdateUser(this.form).then((res) => {
                console.log(res)
                this.$notify({
                    title: '成功',
                    message: res.data.message,
                    type: 'success'
                })
                this.queryUser(this.params)
                this.dialogVisible = false
            })

        },
        // 添加
        addUserHandler() {
            this.dialogVisible = true
            this.title = "新增用户"
        },
        // 时间戳转换
        // dateFormat(row,colnum){
        //     return moment(row[colnum.property]).format('YYYY-MM-DD HH:MM:SS')
        // },
        // 页码改变时
        changeHandler(page) {
            this.params.page = page
        }
    }

}
</script>

<style>
    
    .el-pager li.active {
        color: #2cb5c7;
    }
    .el-pager li:hover {
        color: #2cb5ac;
    }
    .el-link:first-child {
        margin-right: 1rem;
    }
    .el-link.el-link--default {
        color: #2cb5ac;
    }
    .el-link.el-link--default:hover {
        color: #72c9d2;
    }
</style>